<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/normalize.css" />
    <title>首页</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        background: #f2f2f2;
      }

      .header {
        background: #333;
        /* 此处样式可以让导航栏居于页面顶部 */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
      }

      .header_list {
        width: 1080px;
        margin: 0 auto;
        height: 60px;
      }

      .header_item {
        color: #fff;
        text-decoration: none;
        margin-right: 30px;
        padding: 0 20px;
        line-height: 60px;
        display: inline-block;
      }

      /* 鼠标滑过效果 */
      .header_item:hover {
        background: #fff;
        color: #333;
      }

      .main {
        margin-top: 60px;
      }

      .main_banner {
        width: 100%;
        overflow: hidden;
      }

      .main_banner img {
        width: 100%;
        height: auto;
      }

      .main_list {
        width: 75%;
        margin: 0 auto;
        overflow: hidden;
      }

      .main_item {
        overflow: hidden;
        /* 弹性布局 */
        display: flex;
      }

      .main_item_l {
        /* 弹性布局占50% */
        flex: 1;
      }

      .main_item_l img {
        width: 100%;
      }

      .main_item_r {
        /* 弹性布局占50% */
        flex: 1;
        padding: 0 60px;
        display: flex;
        align-items: center;
      }

      .main_item_r_btn {
        display: inline-block;
        border: solid 1px #333;
        line-height: 42px;
        font-size: 16px;
        padding: 0 50px;
        margin-top: 20px;
        /* 鼠标悬浮效果 */
        cursor: pointer;
      }

      .main_item_r_btn:hover {
        background: #333;
        color: #fff;
      }

      .footer {
        background: #4c4c4c;
        line-height: 200px;
        text-align: center;
        color: #fff;
        font-size: 12px;
      }
    </style>
  </head>

  <body>
    <!-- 页面头部导航栏 -->
    <header class="header">
      <div class="header_list">
        <a href="./index.html" class="header_item">首页</a>
        <a href="./introduce.html" class="header_item">品牌介绍</a>
        <a href="./contact.html" class="header_item">联系我们</a>
      </div>
    </header>
    <!-- 页面主体 -->
    <main class="main">
      <div class="main_banner">
        <img src="./images/banner.png" />
      </div>
      <div class="main_list">
        <div class="main_item">
          <div class="main_item_l">
            <img src="./images/index1.jpg" alt="" srcset="" />
          </div>
          <div class="main_item_r">
            <div>
              <h1>全新guccA3家族</h1>
              <h1>新生开场 进击全场</h1>
              <div>锋锐型格，尽显进击之势。豪华内部空间，独具未来科技质感。智能人车交互，打造畅快驾享体验。 充满未来感和进击感的驾享空间，让每次驾乘不止悦目更为赏心。</div>
              <div class="main_item_r_btn">查看详情</div>
            </div>
          </div>
        </div>
        <div class="main_item">
          <div class="main_item_r">
            <div>
              <h1>纯电驱动，为未来而来</h1>
              <div>融合了前沿科技，同时演绎gucc豪华格调。这将成为未来的豪华纯电驱动性能标杆，向未来，始终如一。</div>
              <div class="main_item_r_btn">未来纯电生活体验</div>
            </div>
          </div>
          <div class="main_item_l">
            <img src="./images/index2.jpg" alt="" srcset="" />
          </div>
        </div>
        <div class="main_item">
          <div class="main_item_l">
            <img src="./images/index3.jpg" alt="" srcset="" />
          </div>
          <div class="main_item_r">
            <div>
              <h1>创想，创未来</h1>
              <div>有人看到事实，我们则探寻未知。每天，我们都会以自己的想法、激情和对未来出行的愿景，带给世界一个小小的进步。</div>
              <div class="main_item_r_btn">创见未来</div>
            </div>
          </div>
        </div>
        <div class="main_item">
          <div class="main_item_r">
            <div>
              <h1>预约试驾</h1>
              <div>联系离您最近的经销商。</div>
              <div class="main_item_r_btn">即刻预约</div>
            </div>
          </div>
          <div class="main_item_l">
            <img src="./images/index4.jpg" alt="" srcset="" />
          </div>
        </div>
      </div>
    </main>
    <!-- 页脚 -->
    <footer class="footer">版权@gucc官网 - by 婷</footer>
  </body>
</html>
